<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3420331" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">对</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">微信公众号</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">淘宝</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">微博</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">微店</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">猫爪 (1)</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">猫爪</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">个人4</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1657108517750') format('woff'),
       url('iconfont.ttf?t=1657108517750') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-icon--yes"></span>
            <div class="name">
              对
            </div>
            <div class="code-name">.icon-icon--yes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon--shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-icon--shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixingongzhonghao"></span>
            <div class="name">
              微信公众号
            </div>
            <div class="code-name">.icon-weixingongzhonghao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-taobao"></span>
            <div class="name">
              淘宝
            </div>
            <div class="code-name">.icon-taobao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibo"></span>
            <div class="name">
              微博
            </div>
            <div class="code-name">.icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weidian"></span>
            <div class="name">
              微店
            </div>
            <div class="code-name">.icon-weidian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-maozhao1"></span>
            <div class="name">
              猫爪 (1)
            </div>
            <div class="code-name">.icon-a-maozhao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maozhao"></span>
            <div class="name">
              猫爪
            </div>
            <div class="code-name">.icon-maozhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-geren"></span>
            <div class="name">
              个人4
            </div>
            <div class="code-name">.icon-geren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon--yes"></use>
                </svg>
                <div class="name">对</div>
                <div class="code-name">#icon-icon--yes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon--shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-icon--shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixingongzhonghao"></use>
                </svg>
                <div class="name">微信公众号</div>
                <div class="code-name">#icon-weixingongzhonghao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taobao"></use>
                </svg>
                <div class="name">淘宝</div>
                <div class="code-name">#icon-taobao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibo"></use>
                </svg>
                <div class="name">微博</div>
                <div class="code-name">#icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weidian"></use>
                </svg>
                <div class="name">微店</div>
                <div class="code-name">#icon-weidian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-maozhao1"></use>
                </svg>
                <div class="name">猫爪 (1)</div>
                <div class="code-name">#icon-a-maozhao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maozhao"></use>
                </svg>
                <div class="name">猫爪</div>
                <div class="code-name">#icon-maozhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-geren"></use>
                </svg>
                <div class="name">个人4</div>
                <div class="code-name">#icon-geren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
